<template>

	<view class="nearbyBox">
		<view class="many">
			<text class="title">附近团队</text>
			<text>查看更多 </text>
		</view>
		<view>

			<scroll-view :scroll-x="true" style="white-space: nowrap;">
				<template v-for="item in allTeam">
					<!-- 	<navigator :url="`/homepackge/pages/organizationalPage/organizationalPage?teamId=${item._id}`" -->
					<navigator
						:url="`/homepackge/pages/organizationalPage/organizationalPage?_id=${item.organizationId._id}&teamId=${item._id}`"
						class="serviceBox" hover-class="none">
						<view class="serviceBox">
							<!-- <view > -->
							<image :src="item.avatar" style="width: 160rpx;height: 160rpx;display: inline-block;">
							</image>
							<!-- </view> -->
							<view class="TeamName">
								<text>{{item.name}}</text>
								<text class="adress">{{item.organizationId?.name}}</text>
								<text class="adress">距您4.9Km</text>
							</view>
						</view>
					</navigator>
				</template>
			</scroll-view>

		</view>
	</view>

</template>

<script setup>
	import {
		onMounted,
		ref
	} from 'vue';
	import {
		getTeamApi
	} from '../../api/home';

	const allTeam = ref([])

	onMounted(() => {
		accTeam()
	})

	// // 点击附近团队跳转团队主页
	// function returnTeam(uid) {
	// 	console.log(uid);
	// 	uni.navigateTo({
	// 		url: `/homepackge/pages/Teamhomepage/Teamhomepage?_id=${uid}`
	// 	})
	// }


	//查询 团队
	// async function accTeam() {
	// 	const res = await getTeamApi()
	// 	if (res.code == 200) {
	// 		allTeam.value = res.data.rows
	// 		console.log(res);
	// 	}
	// }
	async function accTeam() {
		const res = await getTeamApi()
		console.log('团队API返回:', res) // 添加详细日志
		if (res.code == 200) {
			allTeam.value = res.data.rows
			console.log('处理后的团队数据:', allTeam.value) // 检查处理后的数据
		} else {
			console.error('API返回异常:', res)
		}
	}
</script>

<style scoped lang="scss">
	.TeamName {
		position: absolute;
		top: 38rpx;
		right: 20rpx;
		display: inline-block;
		display: flex;
		flex-direction: column;
		flex-wrap: wrap;
		white-space: normal;
		width: 250rpx;
		height: 100%;

		text:first-child {
			font-size: 14px;

			width: 250rpx;
			/* 容器宽度 */
			white-space: nowrap;
			/* 文本不换行 */
			overflow: hidden;
			/* 超出部分隐藏 */
			text-overflow: ellipsis;
			/* 超出部分显示为省略号 */

		}

		// border: 1px solid black;
		// position: absolute;
		// top: 50px;
		.adress {
			font-size: 12px;
			color: #999;
			margin-top: 15rpx;
			// width: 150px;
		}
	}

	.serviceBox {
		box-shadow: 0.5px 0.5px 0.5px 0.5px #eee;
		position: relative;
		// display: grid;
		// grid-template-columns: 1fr 1fr;
		width: 492rpx;
		height: 228rpx;
		border: 1px solid #f0f0f0;
		display: inline-block;
		margin-right: 30rpx;
		border-radius: 16px;
		margin-bottom: 40rpx;
		margin-top: 40rpx;

		image {
			margin-top: 30rpx;
			margin-left: 30rpx;
		}
	}

	.nearbyBox {
		margin-top: 20rpx;
		padding: 0 40rpx;
		background: #fff;
		// margin-bottom: 40rpx;

		.title {
			margin-top: 34rpx;
			font-size: 19px;

		}


		.many {
			display: flex;
			justify-content: space-between;

			text:last-child {
				color: #999;
				font-size: 12px;
				margin-top: 50rpx;
			}

		}
	}
</style>